<template>
  <div>
    <template>
      <span>{{$route.meta.firstTitle}}</span>&gt;
      <span>{{$route.meta.secondTitle}}</span>
    </template>
    <div>
       <table>
        <thead>
          <tr>
            <td>编号</td>
            <td>姓名</td>
            <td>年龄</td>
            <td>性别</td>
            <td>专业</td>
            <td>班级</td>
            <td>操作</td>
          </tr>
        </thead>
        <tbody>
          <tr v-for="item in students" :key="item._id">
            <td>{{item._id}}</td>
            <td>{{item.name}}</td>
            <td>{{item.age}}</td>
            <td>{{item.gender}}</td>
            <td>{{item.subjectsId?item.subjectsId.name:'无'}}</td>
            <td>{{item.classesId?item.classesId.name:'无'}}</td>
            <td>
              <button @click="goUpdateStudent(item._id)">修改</button>
              <!-- <router-link :to="'/home/studentsDetail?id='+item._id">查看</router-link> -->
              <!-- <router-link :to="{path:'/home/studentsDetail',query:{id:item._id}}">查看</router-link> -->
              <button @click="goDetailStudent(item._id)">查看</button>
            </td>
          </tr>
        </tbody>
       </table>
    </div>
  </div>
</template>

<script>
export default {
  name:'StudentList',
  data(){
    return{
      list:[]
    }
  },
  methods:{
    async getAllStudents(){
      const {data:{rows}}=await this.$api.students.getStudents()
      this.list=rows
    },
    goUpdateStudent(id){
      this.$router.push({
        path:`/home/studentUpdate/${id}`
      })
    },
    goDetailStudent(id){
      // this.$router.push({
      //   path:`/home/studentsDetail?id=${id}`
      // })
      this.$router.replace({
        path:'/home/studentsDetail',
        query:{
          id
        }
      })
    }
  },
  computed:{
    students(){
      return this.list.filter(item=>item.name)
    }
  },
  created(){
    this.getAllStudents()
  }
}
</script>

<style>

</style>